<div class="container-form">
  <form nz-form [formGroup]="containerForm" role="form">

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>容器名称</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="containerName" autocomplete="off"
          placeholder="容器名称">
        <nz-form-explain
          *ngIf="!(containerForm.get('containerName').valid || containerForm.get('containerName').untouched)">
          <span class="text-danger" *ngIf="containerForm.get('containerName').hasError('required')">组件名称不能为空！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>版本</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="version" autocomplete="off" placeholder="版本号">
        <nz-form-explain *ngIf="!(containerForm.get('version').valid || containerForm.get('version').untouched)">
          <span class="text-danger" *ngIf="containerForm.get('version').hasError('required')">版本不能为空！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>发布日期</nz-form-label>
      <nz-form-control nzSpan="18">
        <nz-date-picker nzShowTime formControlName="releaseDate" nzSize="default"></nz-date-picker>
        <nz-form-explain
          *ngIf="!(containerForm.get('releaseDate').valid || containerForm.get('releaseDate').untouched)">
          <span class="text-danger" *ngIf="containerForm.get('releaseDate').hasError('required')">发布时间不能为空！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control class="modal-footer">
        <button nz-button nzType="primary" class="modal-footer-btn"
          (click)="addContainer()">确&nbsp;&nbsp;&nbsp;&nbsp;定</button>
        <button nz-button nzType="primary" class="modal-footer-btn" nzGhost="true"
          (click)="destroyModal()">取&nbsp;&nbsp;&nbsp;&nbsp;消</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>
